<template>
	<view class="zb-table-header" style="display: flex">
		<view class="item-tr">
			<view
				class="item-td"
				:style="{
					width: `${item.width ? item.width : '100'}px`,
					borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
					textAlign: item.align || 'left'
				}"
				:key="`${index}`"
				v-for="(item, index) in fixedLeftColumns"
			>
				<template>
					{{ sums[index] }}
				</template>
			</view>
		</view>
	</view>
</template>
<script>
import summary from '../js/summary.js';
export default {
	mixins: [summary]
};
</script>
<style lang="scss" scoped>
.zb-table-header {
	overflow: hidden;
	background: #fafafa;
	.item-th {
		padding-left: 8px;
		line-height: 39px;
		height: 40px;
		//display: flex;
		//align-items: center;
		box-sizing: border-box;
	}
}
.item-tr {
	display: flex;
	box-sizing: border-box;
}
.item-td {
	flex-shrink: 0;
	width: 100px;
	padding-left: 8px;
	height: 40px;
	line-height: 40px;
	padding-right: 20px;
	box-sizing: border-box;
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	border-bottom: 1px solid #e8e8e8;
	background: rgb(250, 250, 250);
}
</style>
